<%--
  Created by IntelliJ IDEA.
  User: 86131
  Date: 2021/8/24
  Time: 19:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="font/iconfont.css">
    <script src="js/message.js"></script>
    <title>转乘</title>
    <script>
        console.log("cao");
        alert("您当前的搜索没有直达车辆，为您找到以下转乘");
        function change(obj){
            let value = obj.options[obj.selectedIndex].value ;
            window.open("${pageContext.request.contextPath}/ShowTransferTrainServlet?select="+value,'_self')
        }
    </script>
</head>
<body>
<div class="container-fluid">
    <form action="${pageContext.request.contextPath}/ShowTransferTrainServlet">
        <select id="input_select" name="select" onchange=change(this)>
            <%--    获取 到的真实数据--%>
            <c:forEach items="${transferCitys}" var="transferCity" varStatus="s">
                <option value="${transferCity}">${transferCity}</option>
            </c:forEach>
        </select>
    </form>


    <h3>中转车次查询如下</h3>
    <h3>中转:<p id="bb">${transferCity}</p></h3>
    <table class="table table-hover">
        <%--            表格头--%>
        <tr class="success">
            <th>发站</th>
            <th>中转站</th>
            <th>到站</th>
            <th>操作</th>
        </tr>

        <%--    获取 到的真实数据--%>
        <c:forEach items="${transfer}" var="a" varStatus="s">
            <tr>
                <td><h4>${a.throughTrain1.startStation}</h4>
                        <font color="gray">${a.throughTrain1.date},${a.throughTrain1.startTime}</font><br>
                    <font color="gray">${a.throughTrain1.trainNumber}</font></td>
                <td><h4>${a.throughTrain2.startStation}</h4>
                    <font color="gray">${a.throughTrain1.date},${a.throughTrain1.endTime}~~~${a.throughTrain2.date},${a.throughTrain2.startTime}</font><br>
                    <font color="gray">${a.throughTrain2.trainNumber}</font><br>
                    <font color="dodgerblue">中转时间:${a.time}</font>
                </td>
                <td><h4>${a.throughTrain2.endStation}</h4>
                    <font color="gray">${a.throughTrain2.date},${a.throughTrain2.endTime}</font>
                </td>

                <td><a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/BuyTransferTrain?index=${s.count}">购票</a>
                    </td>
            </tr>
        </c:forEach>
    </table>
</div>


<script>
    const a = $("#bb").text();
    $("#input_select option[value='"+a +"']").attr('selected','selected');
</script>
</body>
</html>
